<template>
  <div class="allOrderContainer">
    <!-- 头部搜索部分 -->
    <div class="orderHeader">
      <div class="orderSearch">
        <el-form ref="form" :model="orderSearch" :inline="true">
          <el-form-item label="字典名称" size="mini">
            <el-select v-model="orderSearch.outlets">
              <el-option label="区域一" value="shanghai" />
            </el-select>
          </el-form-item>
          <el-form-item label="字典编号" size="mini">
            <el-select v-model="orderSearch.outlets">
              <el-option label="区域一" value="shanghai" />
            </el-select>
          </el-form-item>
          <el-form-item size="mini">
            <el-button data-tracker="P60-1" type="primary" icon="el-icon-search"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 订单操作 -->
    <div class="actions">
      <div class="left">
        <el-button
          data-tracker="P60-2"
          v-permission="'dictionary_create'"
          style="margin: 0px 0px 10px 0px"
          type="primary"
          plain
          size="mini"
          @click="shippingcustomerFn"
          ><i class="el-icon-plus"></i> 新增</el-button
        >
      </div>
      <div class="right">
        <el-pagination
          small
          background
          :current-page="pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalListNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-table
      ref="singleTable"
      border
      :data="tableData"
      highlight-current-row
      style="width: 100%"
      stripe
      :max-height="maxheight"
    >
      <el-table-column type="index" label="序号" width="50"> </el-table-column>
      <el-table-column property="dictionary_name" label="字典名称" width="300">
      </el-table-column>
      <el-table-column property="dictionary_code" label="字典编号" width="300">
      </el-table-column>
      <el-table-column property="remark" label="描述"> </el-table-column>
      <el-table-column label="操作" width="160">
        <template slot-scope="scope">
          <el-button
            data-tracker="P60-3"
            v-permission="'dictionary_update'"
            type="text"
            size="mini"
            @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            data-tracker="P60-4"
            v-permission="'dictionary_item_list'"
            type="text"
            size="mini"
            @click="handleAddconfigure(scope.row)"
            >字典配置</el-button
          >
          <el-button
            data-tracker="P60-5"
            v-permission="'dictionary_delete'"
            type="text"
            size="mini"
            @click="handleDeleteFn(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="dialog_cont">
      <el-dialog
        title="新增数据字典"
        :visible.sync="centerDialogVisible"
        width="30%"
        :close-on-click-modal="false"
      >
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
          style="width: 80%"
        >
          <el-form-item label="字典名称" prop="dataAddname">
            <el-input type="text" v-model="ruleForm.dataAddname"></el-input>
          </el-form-item>
          <el-form-item label="字典编码" prop="datacode">
            <el-input type="text" v-model="ruleForm.datacode"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="dataremark">
            <el-input v-model="ruleForm.dataremark"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button data-tracker="P60-7" @click="centerDialogVisible = false"
            >取 消</el-button
          >
          <el-button data-tracker="P60-6" type="primary" @click="submitForm"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
    <div class="dialog_cont_edit">
      <el-dialog
        title="编辑数据字典"
        :visible.sync="EditcenterDialogVisible"
        width="30%"
        :close-on-click-modal="false"
      >
        <el-form
          :model="ruleFormEdit"
          status-icon
          :rules="rulesEdit"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
          style="width: 80%"
        >
          <el-form-item label="字典名称" prop="dataname">
            <el-input
              type="text"
              v-model="ruleFormEdit.dataname"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="字典编码" prop="dataNum">
            <el-input
              type="text"
              v-model="ruleFormEdit.dataNum"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="dataDsec">
            <el-input v-model="ruleFormEdit.dataDsec"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button
            data-tracker="P60-9"
            @click="EditcenterDialogVisible = false"
            >取 消</el-button
          >
          <el-button data-tracker="P60-8" type="primary" @click="resultEditFn"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
    <div class="data_list">
      <el-drawer
        title="数据字典列表"
        :wrapperClosable="false"
        :visible.sync="drawerTableShow"
        :direction="direction"
        :before-close="handleClose"
        size="40%"
      >
        <div style="padding: 0 20px">
          <div style="margin-bottom: 10px">
            <el-button
              v-permission="'dictionary_item_create'"
              type="primary"
              size="mini"
              @click="handleAddFn"
              >增加</el-button
            >
          </div>
          <el-table :data="gridData">
            <el-table-column
              property="item_name"
              label="名称"
              width="150"
            ></el-table-column>
            <el-table-column
              property="item_code"
              label="数据值"
              width="110"
            ></el-table-column>
            <el-table-column
              property="remark"
              label="备注"
              width="220"
            ></el-table-column>
            <el-table-column property="is_enable" label="是否启用" width="80">
              <template slot-scope="scope">
                <span>{{ scope.row.is_enable === 0 ? "启用" : "禁用" }}</span>
              </template>
            </el-table-column>
            <el-table-column property="address" label="操作" width="150">
              <template slot-scope="scope">
                <el-button
                  v-permission="'dictionary_item_update'"
                  size="mini"
                  @click="handleEditchildren(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  v-permission="'dictionary_item_delete'"
                  size="mini"
                  type="danger"
                  @click="childrenDeleteFn(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-drawer>
    </div>
    <div>
      <el-dialog
        title="新增数据字典子菜单"
        :visible.sync="AddcenterDialogVisible"
        width="30%"
        :close-on-click-modal="false"
      >
        <el-form
          :model="ruleFormAdd"
          status-icon
          :rules="rulesAdd"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
          style="width: 80%"
        >
          <el-form-item label="名称" prop="dataChildAddname">
            <el-input
              type="text"
              v-model="ruleFormAdd.dataChildAddname"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="数据值" prop="dataChildAddNum">
            <el-input
              type="text"
              v-model="ruleFormAdd.dataChildAddNum"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <div class="wenceng" style="overflow: hidden">
            <el-form-item
              label="温层数据"
              prop="minval"
              style="width: 254px; float: left"
            >
              <div style="float: left">
                <el-input
                  style="width: 153px"
                  type="text"
                  v-model="ruleFormAdd.minval"
                  autocomplete="off"
                ></el-input>
              </div>
            </el-form-item>
            <span style="float: left; margin: 0 5px 0 5px">--</span>
            <el-form-item prop="maxval" style="width: 150px; float: left">
              <div style="float: left">
                <el-input
                  style="width: 153px"
                  type="text"
                  v-model="ruleFormAdd.maxval"
                  autocomplete="off"
                ></el-input>
              </div>
            </el-form-item>
          </div>
          <el-form-item label="备注" prop="dataChildAddDsec">
            <el-input v-model="ruleFormAdd.dataChildAddDsec"></el-input>
          </el-form-item>
          <!-- <el-form-item label="是否启用" prop="datachilddelivery">
            <el-switch v-model="ruleFormchild.datachilddelivery"></el-switch>
          </el-form-item> -->
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="AddcenterDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="AddChildFn">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        title="编辑数据字典子菜单"
        :visible.sync="EditercenterDialogVisible"
        width="30%"
        :close-on-click-modal="false"
      >
        <el-form
          :model="ruleFormchild"
          status-icon
          :rules="ruleschild"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
          style="width: 80%"
        >
          <el-form-item label="名称" prop="datachildname">
            <el-input
              type="text"
              v-model="ruleFormchild.datachildname"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="数据值" prop="datachildNum">
            <el-input
              type="text"
              v-model="ruleFormchild.datachildNum"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <div class="wenceng" style="overflow: hidden">
            <el-form-item
              label="温层数据"
              prop="minval"
              style="width: 254px; float: left"
            >
              <div style="float: left">
                <el-input
                  style="width: 153px"
                  type="text"
                  v-model="ruleFormchild.minval"
                  autocomplete="off"
                ></el-input>
              </div>
            </el-form-item>
            <span style="float: left; margin: 0 5px 0 5px">--</span>
            <el-form-item prop="maxval" style="width: 150px; float: left">
              <div style="float: left">
                <el-input
                  style="width: 150px"
                  type="text"
                  v-model="ruleFormchild.maxval"
                  autocomplete="off"
                ></el-input>
              </div>
            </el-form-item>
          </div>
          <el-form-item label="备注" prop="datachildDsec">
            <el-input v-model="ruleFormchild.datachildDsec"></el-input>
          </el-form-item>
          <!-- <el-form-item label="是否启用" prop="datachilddelivery">
            <el-switch v-model="ruleFormchild.datachilddelivery"></el-switch>
          </el-form-item> -->
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="EditercenterDialogVisible = false"
            >取 消</el-button
          >
          <el-button type="primary" @click="EditChildFn">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  DictionaryList,
  CreateDictionary,
  DeleteDictionary,
  UpdateDictionary,
  DictionaryItemList,
  DictionaryOptions,
  DeleteItemDictionary,
  UpdateItemDictionary,
  CreateItemDictionary,
} from "@/api/datadictionary";
export default {
  name: "datadictionary",
  data() {
    return {
      maxheight: "auto",
      centerDialogVisible: false,
      EditcenterDialogVisible: false,
      drawerTableShow: false,
      AddcenterDialogVisible: false,
      EditercenterDialogVisible: false,
      direction: "rtl",
      editerNmun: "",
      ruleForm: {
        dataAddname: "",
        datacode: "",
        dataremark: "",
        is_enable: "1",
      },
      rules: {
        dataAddname: [
          { required: true, message: "请输入数据字典名称", trigger: "blur" },
        ],
        datacode: [
          { required: true, message: "请输入数据字典编码", trigger: "blur" },
        ],
      },
      ruleFormAdd: {
        dataChildAddname: "",
        dataChildAddNum: "",
        dataChildAddDsec: "",
        maxval: "",
        minval: "",
      },
      rulesAdd: {
        dataChildAddname: [
          { required: true, message: "请输入数据字典名称", trigger: "blur" },
        ],
        dataChildAddNum: [
          { required: true, message: "请输入数据字典编码", trigger: "blur" },
        ],
      },
      ruleFormchild: {
        datachildname: "",
        datachildNum: "",
        datachildDsec: "",
        maxval: "",
        minval: "",
        datachilddelivery: "",
      },
      ruleschild: {
        datachildname: [
          { required: true, message: "请输入数据字典名称", trigger: "blur" },
        ],
        datachildNum: [
          { required: true, message: "请输入数据字典编码", trigger: "blur" },
        ],
      },
      ruleFormEdit: {
        dataname: "运输方式",
        dataNum: "12",
        dataDsec: "",
      },
      rulesEdit: {},
      pageNum: 1, //目前在第几页
      totalListNum: 100, //列表总数
      pageSize: 20, //一页多少条
      sortFlag: 0, //指定排序方式的
      orderSearch: {},
      tableData: [],
      gridData: [],
      TypeData: [],
      dictionaryid: "",
      childId: "",
      dictionaryidData: "",
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.DictionaryListFn(1, 100);
    this.DictionaryOptionsFn();
  },
  methods: {
    //动态改变启用状态值
    DictionaryOptionsFn() {
      const data = {
        dictionary_code: "is_enable",
      };
      DictionaryOptions(data).then((res) => {
        if (res.code === 10000) {
          this.TypeData = res.data.list;
        }
      });
    },
    //子菜单列表编辑
    handleEditchildren(dataobj) {
      this.EditercenterDialogVisible = true;
      this.ruleFormchild.datachildname = dataobj.item_name;
      this.ruleFormchild.datachildNum = dataobj.item_code;
      this.ruleFormchild.datachildDsec = dataobj.remark;
      this.dictionaryid = dataobj.dictionary_id;
      (this.ruleFormchild.minval = dataobj.min),
        (this.ruleFormchild.maxval = dataobj.max),
        (this.childId = dataobj.id);
      // this.ruleFormchild.datachilddelivery = Number(dataobj.is_enable)
    },
    //子菜单编辑确定按钮函数
    EditChildFn() {
      const data = {
        dictionary_id: this.dictionaryid,
        id: this.childId,
        item_name: this.ruleFormchild.datachildname,
        item_code: this.ruleFormchild.datachildNum,
        remark: this.ruleFormchild.datachildDsec,
        min: this.ruleFormchild.minval,
        max: this.ruleFormchild.maxval,
        is_enable: "0",
      };
      UpdateItemDictionary(data).then((res) => {
        if (res.code === 10000) {
          this.$message({
            type: "success",
            message: "修改数据字典子菜单成功",
          });
          this.EditercenterDialogVisible = false;
          this.DictionaryItemListFn(this.dictionaryid);
        }
      });
    },
    //新增发货计费产品
    shippingcustomerFn() {
      this.centerDialogVisible = true;
      this.ruleForm.dataAddname = "";
      this.ruleForm.datacode = "";
      this.ruleForm.dataremark = "";
    },
    //编辑
    handleEdit(val) {
      this.EditcenterDialogVisible = true;
      this.ruleFormEdit.dataname = val.dictionary_name;
      this.ruleFormEdit.dataNum = val.dictionary_code;
      this.ruleFormEdit.dataDsec = val.remark;
      this.editerNmun = val.id;
    },
    //编辑确定按钮接口函数
    resultEditFn() {
      const formName = {
        dictionary_name: this.ruleFormEdit.dataname,
        dictionary_code: this.ruleFormEdit.dataNum,
        remark: this.ruleFormEdit.dataDsec,
        is_enable: "0",
        id: this.editerNmun,
      };
      if (
        this.ruleFormEdit.dataNum !== "" &&
        this.ruleFormEdit.dataname !== ""
      ) {
        UpdateDictionary(formName).then((res) => {
          if (res.code === 10000) {
            this.EditcenterDialogVisible = false;
            this.$message({
              type: "success",
              message: "修改数据字典成功",
            });
            this.DictionaryListFn(this.pageNum, this.pageSize);
          }
        });
      } else {
        this.$message({
          type: "success",
          message: "请正确填写信息，必填项不能为空",
        });
      }
    },
    //字典配置
    handleAddconfigure(obj) {
      this.drawerTableShow = true;
      // console.log(obj);
      this.DictionaryItemListFn(obj.id);
      this.dictionaryidData = obj.id;
    },
    handleClose() {
      this.drawerTableShow = false;
    },
    //新增数据字典确定按钮函数
    submitForm() {
      const formName = {
        dictionary_name: this.ruleForm.dataAddname,
        dictionary_code: this.ruleForm.datacode,
        remark: this.ruleForm.dataremark,
        is_enable: "1",
      };
      if (this.ruleForm.datacode !== "" || this.ruleForm.dataAddname !== "") {
        CreateDictionary(formName).then((res) => {
          if (res.code === 10000) {
            this.centerDialogVisible = false;
            this.$message({
              type: "success",
              message: "创建数据字典成功",
            });
            this.DictionaryListFn(this.pageNum, this.pageSize);
          }
        });
      } else {
        this.$message({
          type: "success",
          message: "请正确填写信息，必填项不能为空",
        });
      }
    },
    //子菜单添加
    handleAddFn() {
      this.AddcenterDialogVisible = true;
      this.ruleFormAdd.dataChildAddname = "";
      this.ruleFormAdd.dataChildAddNum = "";
      this.ruleFormAdd.dataChildAddDsec = "";
      this.ruleFormAdd.maxval = "";
      this.ruleFormAdd.minval = "";
    },
    //子菜单添加确定函数
    AddChildFn() {
      const data = {
        item_name: this.ruleFormAdd.dataChildAddname,
        item_code: this.ruleFormAdd.dataChildAddNum,
        remark: this.ruleFormAdd.dataChildAddDsec,
        is_enable: "0",
        dictionary_id: this.dictionaryidData,
        min: this.ruleFormAdd.minval,
        max: this.ruleFormAdd.maxval,
      };
      CreateItemDictionary(data).then((res) => {
        if (res.code === 10000) {
          this.$message({
            type: "success",
            message: "创建数据字典子菜单成功!",
          });
          this.AddcenterDialogVisible = false;
          this.DictionaryItemListFn(this.dictionaryidData);
        }
      });
    },
    //数据字典列表接口
    DictionaryListFn(pageNumval, pageSizeval) {
      const data = {
        page: pageNumval,
        page_size: pageSizeval,
      };
      DictionaryList(data).then((res) => {
        if (res.code === 10000) {
          this.tableData = res.data.list;
          if (this.tableData.length > 6) {
            //两排操作栏
            this.maxheight = document.documentElement.clientHeight - 265;
          } else {
            this.maxheight = "auto";
          }

          this.pageNum = res.data.pagination.current_page;
          this.totalListNum = res.data.pagination.total;
          this.pageSize = res.data.pagination.per_page_count;
        }
      });
    },
    //删除数据字典
    handleDeleteFn(rowval) {
      const idsData = [];
      idsData.push(rowval);
      const dataId = {
        ids: idsData,
      };
      DeleteDictionary(dataId).then((res) => {
        if (res.code === 10000) {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.DictionaryListFn(this.pageNum, this.pageSize);
        }
      });
    },
    handleSizeChange(val) {
      this.pageSize = val; //一页多少条
      this.DictionaryListFn(this.pageNum, this.pageSize);
    },
    handleCurrentChange(val) {
      this.pageNum = val; //第多少页
      this.DictionaryListFn(this.pageNum, this.pageSize);
    },

    //数据字典子菜单列表接口函数
    DictionaryItemListFn(object) {
      const itemData = {
        page: this.pageNum,
        page_size: this.pageSize,
        dictionary_id: object ? object : "",
      };
      DictionaryItemList(itemData).then((res) => {
        if (res.code === 10000) {
          this.gridData = res.data.list;
        }
      });
    },
    //数据字典子菜单列表删除
    childrenDeleteFn(Delobject) {
      const idsData = [];
      idsData.push(Delobject);
      const dataId = {
        ids: idsData,
      };
      DeleteItemDictionary(dataId).then((res) => {
        if (res.code === 10000) {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.DictionaryItemListFn(this.dictionaryidData);
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.dialog_cont .el-dialog__header {
  border-bottom: 1px solid #eee !important;
}
/deep/.wenceng .el-form-item__content {
  margin-left: 0px !important;
}
.allOrderContainer {
  padding: 10px 15px;
  background-color: #fff;
  .orderHeader {
    background-color: #fff;
    .orderSearch {
      form {
        ::v-deep .el-form-item__label {
          font-size: 12px;
        }
        .el-textarea {
          width: 135px;
        }
      }
    }
  }
  .actions {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    .right {
      margin: 0px 0px 10px 0px;
      ::v-deep .el-pagination {
        display: inline-block;
        .el-input--mini .el-input__inner {
          height: 24px;
        }
      }
    }
  }
}
</style>